<template>
  <el-dialog width="500px" title="角色详情" :visible.sync="showDialog" :append-to-body="true" @close="ResetData">
    <el-form v-loading="loading" label-width="auto">
      <el-form-item label="角色名称">
        <el-input style="width:300px" size="mini" :value="detailData.name" />
      </el-form-item>
      <el-form-item label="启用">
        <el-switch size="mini" :value="detailData.state === 1" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input type="textarea" :rows="5" style="width:300px" size="mini" placeholder="角色描述" :value="detailData.description" />
      </el-form-item>
      <el-form-item label="角色关联部门">
        <div v-if="cardList.length > 0" style="width: 300px;">
          <el-tag v-for="(item,index) in cardList" :key="index" type="" effect="plain" class="Tag">
            {{ item }}
          </el-tag>
        </div>
        <div v-else>
          <el-tag type="warning" class="Tag" effect="plain">空</el-tag>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getRoleDetail } from '@/api/role.js'
import { getDepartment } from '@/api/department.js'
export default {
  name: 'DialogDetail',
  data() {
    return {
      loading: false,
      showDialog: false, // 弹框显示隐藏
      detailData: {}, // 详情数据
      defaultData: [], // 默认部门列表
      cardList: [] // 卡片列表
    }
  },
  methods: {
    async GetRoleDetail(id) {
      this.loading = true
      const res = await getRoleDetail(id) // 获取 - 角色详情
      console.log(res)
      this.detailData = res
      // this.GetDepartment()
      const data = await getDepartment() // 获取 - 部门列表
      this.defaultData = data
      if (res.permIds.length === 0) {
        this.cardList = []
        this.loading = false
        return
      }
      // 处理 角色关联的权限集合 将permIds数组转换成对应的部门名字
      for (let i = 0; i < this.detailData.permIds.length; i++) {
        this.$nextTick(() => {
          this.defaultData.some(item => {
            if (item.id === this.detailData.permIds[i]) {
              this.cardList.push(item.introduce)
            }
          })
          this.loading = false
        })
      }
    },
    async GetDepartment() {
      const data = await getDepartment()
      console.log(data)
      this.defaultData = data
    },
    // 重置数据
    ResetData() {
      this.detailData = {}
      this.defaultData = []
      this.cardList = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body{
      display: flex;
      justify-content: center;
      align-items: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.Tag{
  width: 90px;
  margin-right: 10px;
  text-align: center;
  font-size: 13px;
}
</style>
